<template>
    <div class="admin" style="min-height: 800px">
        <el-row>
            <el-col :span="6" >
                <el-card shadow="hover" style="height: 100px;background-color: #409EFF">
                    <el-col :span="10" style="color:white;font-size: 15px;font-family: 'Microsoft YaHei'">
                        患者总数:<h1 style="color:white;">{{ this.$store.state.patientAmount }}</h1>
                    </el-col>
                    <el-col :span="2" :offset="10"><i class="el-icon-medal" style="font-size: 30px"></i></el-col>
                </el-card>
            </el-col>
            <el-col :span="6" >
                <el-card shadow="hover" style="height: 100px;background-color: #67C23A">
                    <el-col :span="10" style="color:white;font-size: 15px;font-family: 'Microsoft YaHei'">
                        医生总数:<h1 style="color:white;">{{this.$store.state.doctorAmount}}</h1>
                    </el-col>
                    <el-col :span="2" :offset="10"><i class="el-icon-s-custom" style="font-size: 30px"></i></el-col>
                </el-card>
            </el-col>
            <el-col :span="6" >
                <el-card shadow="hover" style="height: 100px;background-color: #E6A23C">
                    <el-col :span="10" style="color:white;font-size: 15px;font-family: 'Microsoft YaHei'">
                        管理员总数:<h1 style="color:white;">{{ this.$store.state.adminAmount }}</h1>
                    </el-col>
                    <el-col :span="2" :offset="10"><i class="el-icon-user" style="font-size: 30px"></i></el-col>
                </el-card>
            </el-col>
            <el-col :span="6" >
                <el-card shadow="hover" style="height: 100px;background-color: #909399">
                    <el-col :span="10" style="color:white;font-size: 15px;font-family: 'Microsoft YaHei'">
                        用户总数:<h1 style="color:white;">{{ this.$store.state.adminAmount+this.$store.state.patientAmount+this.$store.state.doctorAmount }}</h1>
                    </el-col>
                    <el-col :span="2" :offset="10"><i class="el-icon-user-solid" style="font-size: 30px"></i></el-col>
                </el-card>
            </el-col>
        </el-row>
        <el-row style="margin-top: 50px" >
            <el-col :span="10" :offset="2">
                <div id="myChart" style="width: 600px; height: 400px"></div>
            </el-col>
            <el-col :span="10"  :offset="2">
                <div id="myChart2" style="width: 600px; height: 400px"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";

export default {
    data(){
        return{
            total: "",
        }
    },
    name: "AdminHome",

    mounted() {
        this.countAmount(1);
        this.countAmount(2);
        this.countAmount(3);
        this.drawLine();
        this.drawLine2();
    },
    methods:{
        async countAmount(roleflag) {
            const that = this;
            await axios.post("http://localhost:8848/user/findAmount", {
                roleflag: roleflag,
            }).then(function (response) {
                    console.log(response);
                    if (roleflag === 1) {
                        that.$store.state.adminAmount = response.data.data;

                    }
                    if (roleflag === 2) {
                        that.$store.state.doctorAmount = response.data.data;

                    }
                    if (roleflag === 3) {
                        that.$store.state.patientAmount = response.data.data;

                    }
                }
            );
        },
        async drawLine() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('myChart'));
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '用户数量饼图',
                    subtext: '人员分布',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '人员分布',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: this.$store.state.patientAmount, name: '患者总数' },
                            { value: this.$store.state.doctorAmount, name: '医生总数' },
                            { value: this.$store.state.adminAmount, name: '管理员总数' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        },
        drawLine2() {
            // 基于准备好的dom，初始化echarts实例
            var myChart2 = echarts.init(document.getElementById('myChart2'));
            // 绘制图表
            myChart2.setOption({
                title: {
                    text: '用户数量柱状图',
                    left: 'center',

                },
                tooltip: {},
                xAxis: {
                    data: ['患者', '医生', '管理员']
                },
                yAxis: {},
                series: [
                    {
                        name: '人员数量',
                        type: 'bar',
                        data: [
                            this.$store.state.patientAmount,
                            this.$store.state.doctorAmount,
                            this.$store.state.adminAmount
                        ]
                    }
                ]
            });
        }
    }
}
</script>

<style scoped>

</style>
